<template>
	<!-- 意见反馈 -->
	<view class="container">
		<view class="top">
			您遇到什么问题了吗？提交问题，工作人员会及时给你答复
		</view>
		<view class="mid">
			<view class="title">
				您的问题和建议
			</view>
			<textarea v-model="opinion" placeholder="请输入问题和建议" />
			<view class="title">
			您的联系方式
			</view>
			<input type="text" v-model="phone" placeholder="请输入您的电话号码" @blur="changetel"/>
			<view class="text">
				请留下你的联系方式，以便我们能够方便了解问题和及时反馈问题结果，获得帮助
			</view>
		</view>
		<view class="btn" @tap="Submission">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opinion:'',
				phone:'',
				token:''
			};
		},
		onLoad(e) {
			// console.log(e.token)
			this.token=e.token
		},
		methods:{
			changetel() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						duration: 2000,
						icon: "none"
					});
					this.phone = "";
				}
			},
			Submission(){
				if(this.opinion==''){
					uni.showToast({
						title: '您还没有输入您的意见哦',
						icon:'none',
						duration:2000
					});
				}else if(this.phone==''){
					uni.showToast({
						title: '您还没有填写您的手机号哦',
						icon:'none',
						duration:2000
					});
				}else{
					uni.showLoading({
						title: '加载中',
						mask: false
					});
					uni.request({
						url: this.webUrl+'/user/my/feedback',
						method: 'POST',
						header:{
							token:this.token
						},
						data: {
							opinion:this.opinion,
							phone:this.phone
						},
						success: res => {
							console.log(res)
							uni.hideLoading()
							if(res.data.code==0){
								uni.showToast({
									title: '提交成功',
									icon:'success',
									duration:2000
								});
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									});
								},1500)
							}else if(res.data.code==3){
								uni.showToast({
									title: res.data.msg,
									icon:'none',
									duration:2000
								});
							}else{
								uni.showToast({
									title: '网络错误',
									icon:'none',
									duration:2000
								});
							}
						},
						fail: () => {
							uni.showToast({
								title: '网络错误',
								icon:'none',
								duration:2000
							});
						},
						complete: () => {}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
	.container{
		position: absolute;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: #f2f2f2;
		.top{
			padding: 18upx 30upx 22upx 36upx;
			background: #FFFFFF;
			border-top: 2upx solid #f2f2f2;
			border-bottom-left-radius: 30upx;
			color: #aaaaaa;
			border-bottom-right-radius: 30upx;
			font-size: 24upx;
			line-height: 24upx;
		}
		.mid{
			background: #FFFFFF;
		}
		.title{
			margin-top: 30upx;
			border-bottom-right-radius: 40upx;
			border-top-right-radius: 40upx;
			font-size: 28upx;
			line-height: 60upx;
			color: #FFFFFF;
			padding-left: 30upx;
			height: 60upx;
			width: 90%;
			background: #fe5621;
		}
		textarea{
			border: 2upx solid #b6b6b6;
			border-radius: 20upx;
			margin: 30upx auto;
			width: 85%;
			height: 282upx;
			padding: 20upx;
		}
		input{
			border: 2upx solid #b6b6b6;
			border-radius: 10upx;
			width: 85%;
			padding:0 20upx;
			height: 80upx;
			line-height: 80upx;
			margin: 30upx 30upx 22upx 30upx;
		}
		.text{
			margin:0 30upx;
			padding-bottom: 10upx;
			font-size:20upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(102,102,102,1)
		}
		.btn{
			position: absolute;
			bottom: 0;
			height: 100upx;
			width: 100%;
			font-size:36upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(253,253,253,1);
			text-align: center;
			line-height: 100upx;
			background: #fe5621;
		}
	}
</style>
